<template>
  <uni-nav-bar title="呼叫安蓝服务详情" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package">
    <view class="space-between">
      <view>车友信息</view>
      <view><text>{{orderAll.driver_name}} </text><text style="color:#1B91FF;"
          @click="telCall(orderAll.driver_mobile)">{{orderAll.driver_mobile}}</text></view>
    </view>
    <view class="space-between top">
      <view>呼叫时间</view>
      <view>{{orderAll.createtime}}</view>
    </view>
    <view class="space-between top">
      <view>服务需求</view>
      <view>{{orderAll.cate}}</view>
    </view>
    <view class="space-between top">
      <view>预约时间</view>
      <view>{{orderAll.subtime}}</view>
    </view>
    <view class="space-between top">
      <view>预约地址</view>
      <view>{{orderAll.address}}</view>
    </view>
    <view class="space-between top">
      <view>领取人</view>
      <view>{{orderAll.plug_name}}</view>
    </view>
    <view class="space-between top">
      <view>领取时间</view>
      <view>{{orderAll.updatetime}}</view>
    </view>
    <view class="space-between top">
      <view>服务人员备注</view>
      <view>{{orderAll.plug_des}}</view>
    </view>
  </view>
  <view class="center task" style="justify-content: space-around;">
    <view style="border-color:#FD9B00;color:#FD9B00;" v-if="orderAll.status===0" @click="collect()">领取任务</view>
    <view style="border-color:#1B91FF;color:#1B91FF;" @click="telCall(orderAll.driver_mobile)">联系车友</view>
    <view style="border-color:#999;color:#999;" @click="enter()" v-if="orderAll.status!==0">任务备注</view>
  </view>
  <view style="color:#FD9B00;text-align: center;margin-top:30rpx;font-weight: 500;"
    @click="redirectTo('Sale/callBack/callList')">查看服务列表></view>
  <!-- 输入框示例 -->
  <uni-popup ref="inputDialog" type="dialog">
    <uni-popup-dialog ref="inputClose" mode="input" title="任务备注" placeholder="请输入内容"
      @confirm="dialogInputConfirm"></uni-popup-dialog>
  </uni-popup>
</template>

<script setup lang="ts">
  import { navBack,redirectTo } from '@/utils/navigator';
  import { showLoading, errorToast, successToast } from '@/utils/prompt';
  import { onLoad } from '@dcloudio/uni-app';
  import { telCall } from '@/utils/copyText';
  import { toPublish } from '@mqtt';
  import { getCallIn } from '@/gql/call';
  import { getDriverID } from '@/stores/driverID';
  import { decrypt } from '@/utils/jsencrypt';
  import { ref } from 'vue';
  const driver_id = getDriverID();
  const inputDialog = ref(null)
  const orderID = ref()
  const orderAll = ref({})
  const all = ref()
  onLoad((pearm) => {
    if (pearm.id) {
      orderID.value = pearm.id
    } else {
      const loct = uni.getStorageSync('StoreData')
      all.value = JSON.parse(decrypt(loct))
      orderID.value = all.value.id
    }
    init()
  })
  function init() {
    showLoading('正在加载');
    const payload = {
      query: getCallIn,
      variables: {
        id: Number(orderID.value)
      },
    };
    toPublish('ql/plug/getCallInfo', payload, (obj : any) => {
      uni.hideLoading();
      const { get_call_info } = obj.data;
      orderAll.value = get_call_info
    });
  }
  /**
   * 领取任务
   */
  function collect() {
    showLoading('正在加载');
    const payload = {
      plug_id: driver_id,
      id: Number(orderID.value)
    };
    toPublish('plug/receiveCall', payload, (obj : any) => {
      uni.hideLoading();
      const { code, msg } = obj;
      if (code === 1) {
        successToast(msg)
        init();
      } else {
        errorToast(msg)
      }
    });
  }
  function enter() {
    inputDialog.value.open();
  }
  function dialogInputConfirm(val) {
    if (val) {
      showLoading('正在加载');
      const payload = {
        id: Number(orderID.value),
        plug_des: val,
      };
      toPublish('plug/addPlugDes', payload, (obj : any) => {
        uni.hideLoading();
        const { code, msg } = obj;
        if (code === 1) {
          init();
        } else {
          errorToast(msg)
        }
      });
    }
  }
</script>

<style scoped lang="less">
  .top {
    margin-top: 15rpx;
  }

  .task {
    view {
      width: 230rpx;
      height: 84rpx;
      box-shadow: 1px 2px 4px 0px rgba(204, 204, 204, 0.5);
      border-radius: 5px;
      border: 2px solid;
      text-align: center;
      line-height: 84rpx;
    }
  }
</style>